<template>
	<view class="progress bs">
		<view class="box-top" v-for="(item,index) in count" :key="index">
			<view class="line" :class="{active:index<current-1,none:index==(count-1)}">
				<!-- 中线 -->
				<view class="dot" :class="{'active-dot':index<current}"></view> <!-- 圆点 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataArray: {
				type: Array||Number
			},
			current:Number,
			count:Number
		},
		data() {
			return {}
		},
		mounted() {},
		methods: {}
	}
</script>

<style scoped="scoped" lang="scss">
	.progress {
		display: flex;
		padding-left:calc(calc(630rpx/7) - 16rpx);
	}

	.box-top {
		top: 20rpx;
		box-sizing: border-box;
		display: flex;

		.left-box-top {
			width: 180rpx;
			text-align: center;
			color: rgba(198, 198, 198, 1);
			font-size: 20rpx;
		}

		.line {
			width: 100%;
			height: 2rpx;
			background-color:#FFD5B6;
			width: calc(630rpx/7);
			height: 8rpx;

			.dot {
				width: 16rpx;
				height: 16rpx;
				background-color: #FFD5B6;
				border-radius: 50%;
				position: relative;
				//left: -10rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.right-box-top {
			flex: 1;
			padding: 0 0 20rpx 0;
		}
	}

	//激活元素
	.active {
		background-color: #A93A41 !important;
	}
	.active-dot{
		box-sizing: border-box;
		border: 4rpx solid #A93A41;
	}
	// 隐藏元素
	.none {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
